<template>
  <div class="dm">
    <div class="dm-full" :style="{width: pageWidth+'px'}">
      <div class="dm-data" v-loading="loading">
        <div class="dm-data-top">
          <div class="dm-data-actions">
            <ListCascaderDialog :multiple="true"
                              :panel1="userSelectPanel1"
                              :panel2="userSelectPanel2"
                              @onConfirm="doUsersCascaderConfirm">
              <a-button>重新选人</a-button>
            </ListCascaderDialog>
          </div>
        </div>
        <Table :data="dataRows" size="small" stripe :height="pageHeight-68">
          <TableColumn prop="orgFullName" label="工作单位" width="250" />
          <TableColumn prop="name" label="姓名" width="150" />
          <TableColumn min-width="300">
            <span slot="header">
              <span style="margin-right: 5px;">功能权限</span>
              <a-popconfirm title="您确定要清除全部人的功能权限吗？" placement="top" @confirm="doClearRoles">
                  <a-button title="批量清除全部人的功能权限" size="small" type="link" icon="delete" />
              </a-popconfirm>
              <TreeSelectDialog dataUrl="/jsofted/role/tree"
                                :multiple="true"
                                :width="400"
                                :queryParams="roleSelectQueryParams"
                                @onConfirm="doRoleSelectConfirm">
                <a-button title="批量授权" size="small" type="link" icon="plus" />
              </TreeSelectDialog>
            </span>
            <span slot-scope="{row}">
              <TreeTransferDialog :value="row.roleList"
                                  :leftOptions="roleTransferLeftOptions(row)"
                                  :rightOptions="roleTransferRightOptions()"
                                  @onClose="refreshDataRows"
              />
            </span>
          </TableColumn>
        </Table>
      </div>
    </div>
  </div>
</template>
<script>
import DataFormJS from '@/utils/DataFormUtils'
import {Table, TableColumn} from 'element-ui'

export default {
  mixins: [DataFormJS],
  components: {Table, TableColumn},
  data() {
    return {
      queryUrl: '/jsofted/user/list/',
      dataRows: [],
      queryDataRows: window.$debounce(this._queryDataRows),
      loading: false,
      roleSelectQueryParams: {
        tenantId: this.$loginInfo.tenantId
      },
      userSelectPanel1: {
        dataUrl: '/jsofted/org/tree',
        title: '第1步：选择单位',
      },
      userSelectPanel2: {
        dataUrl: '/jsofted/user/list',
        casField: 'orgId',
        title: '第2步：选择人员',
      },
      currIdList: []
    }
  },
  watch: {
  },
  methods: {
    init() {
      // console.log('init: %s', JSON.stringify(this.pageParams))
      this.currIdList = this.pageParams.idList
      this.queryDataRows()
    },
    roleTransferRightOptions() {
      return {
        addUrl: '/jsofted/userRole/add',
        deleteUrl: '/jsofted/userRole/deleteBy',
        field: 'roleId',
        title: '已选角色'
      }
    },
    roleTransferLeftOptions(row) {
      return {
        dataUrl: '/jsofted/role/tree',
        field: 'userId',
        title: '可选角色',
        value: row.id,
        queryParams: {
          tenantId: this.$loginInfo.tenantId
        },
      }
    },
    refreshDataRows() {
      setTimeout(() => {
        this.queryDataRows()
      }, 500)
    },
    _queryDataRows() {
      if (!this.queryUrl) {
        return
      }
      this.loading = true
      this.$http.post(this.queryUrl, {idList: this.currIdList}).then((rs) => {
        this.loading = false
        const result = rs.data
        if (result.success) {
          this.dataRows = result.data
        } else {
          this.dataRows = []
        }
      })
    },
    doClearRoles() {
      let idList = []
      this.dataRows.forEach(row => {
        idList.push(row.id)
      })
      this.loading = true
      this.$http.post('/jsofted/userRole/deleteBy', {userId: idList}).then((rs) => {
        this.loading = false
        const result = rs.data
        if (result.success) {
          this.$message.success(result.message)
          this.queryDataRows()
        } else {
          this.$alert.error({title: result.message})
        }
      })
    },
    doUsersCascaderConfirm({rows, keys}) {
      console.log('doUsersCascaderConfirm: keys = %s', JSON.stringify(keys))
      console.log('doUsersCascaderConfirm: rows = %s', JSON.stringify(rows))
      this.currIdList = keys
      this.refreshDataRows()
    },
    doRoleSelectConfirm(event) {
      // console.log('doRoleSelectConfirm: %s', JSON.stringify(event))
      let formDatas = []
      event.keys.forEach(roleId => {
        this.dataRows.forEach(row => {
          formDatas.push({
            roleId: roleId,
            userId: row.id
          })
        })
      })
      let uniqueFields = ['roleId', 'userId']
      this.loading = true
      this.$http.post('/jsofted/userRole/saveAll', {
        uniqueFields: uniqueFields,
        datas: formDatas
      }).then((rs) => {
        this.loading = false
        const result = rs.data
        if (result.success) {
          this.$message.success(result.message)
          this.refreshDataRows()
        } else {
          this.$alert.error({title: result.message})
        }
      })
    },
  }
}
</script>
